@extends('admin.layout.app')

@section('title', '修改資料')
@section('content')
    <div class="layui-col-lg12">
        <div class="layui-card">
            <div class="layui-card-header">
                <div class="roles_create_back">
                    修改資料
                </div>
            </div>
            <div class="layui-card-body">
                <form class="layui-form" method="post" action="@broute('profile.edit')">
                    <div class="layui-form-item">
                        <label class="layui-form-label">員工編號</label>
                        <div class="layui-input-block">
                            <input type="text" name="staff_id" required lay-verify="required" placeholder="請輸入員工編號"
                                   autocomplete="off" class="layui-input" value="{{ $staff_id ?? '' }}">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">姓名</label>
                        <div class="layui-input-block">
                            <input type="text" name="name" required lay-verify="required" placeholder="請輸入姓名"
                                   autocomplete="off" class="layui-input" value="{{ $name??'' }}">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">暱稱</label>
                        <div class="layui-input-block">
                            <input type="text" name="nickname" required lay-verify="required" placeholder="請輸入姓名"
                                   autocomplete="off" class="layui-input" value="{{ $nickname??'' }}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">头像</label>
                        <div class="layui-input-inline">
                            <input type="hidden" name="avatar" lay-verify="required" id="inputimgurl" placeholder="图片地址" value="" class="layui-input">
                        </div>
                        <div class="layui-input-inline photo-list-box" style="width: auto">
                            <div class="layui-upload-list photo-list" style="margin:0">
                                @if(!empty($avatar))
                                    <img src="{{$avatar}}" alt="" style="width: 80px;height: auto;" class="layui-upload-img">
                                @endif
                            </div>
                        </div>
                        <div class="layui-input-inline layui-btn-container" style="width: auto;">
                            <button type="button" class="layui-btn layui-btn-primary" id="editimg">修改图片</button>
                        </div>
                        <div class="layui-form-mid layui-word-aux">头像的尺寸限定150x150px,大小在50kb以内</div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">分機號</label>
                        <div class="layui-input-block">
                            <input type="text" name="call_id" placeholder="請輸入分機號，默認工號" autocomplete="off"
                                   class="layui-input" value="{{ $call_id??'' }}">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">郵箱</label>
                        <div class="layui-input-block">
                            <input type="text" name="email" placeholder="請輸入郵箱" autocomplete="off" class="layui-input"
                                   value="{{ $email??'' }}">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="submitform11">保存</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection
@section('script')
    {{--<script type="text/javascript" src="{{ asset('js/cropper.js') }}"></script>--}}
    <script>
        layui.config({
            base: '{{ asset('vendor/cropper') }}/' //layui自定义layui组件目录
        }).use(['form', 'croppers', 'cropper'], function () {
            var $ = layui.jquery
                , form = layui.form
                , croppers = layui.croppers
                , layer = layui.layer;

            //创建一个头像上传组件
            croppers.render({
                elem: '#editimg'
                , saveW: 150     //保存宽度
                , saveH: 150
                , mark: 1 / 1    //选取比例
                , area: '900px'  //弹窗宽度
                , url: "/upload?type=avatar"  //图片上传接口返回和（layui 的upload 模块）返回的JOSN一样
                , done: function (result) { //上传完毕回调
                    if(result.code == 200){
                        layer.msg("上传成功",{icon: 1});
                        layer.closeAll('page');
                        $(".showImgEdit").hide();
                        $("#inputimgurl").val(result.data.url);
                        var img = '<img src="' + result.data.url + '" alt="' + result.data.url + '" style="width: 80px;height: auto;" class="layui-upload-img">';
                        $(".photo-list").html(img);
                        $(".photo-list-box").show();
                    }else{
                        layer.msg("上传失败，请重试");
                        $(".showImgEdit").hide();
                        return done(result);
                    }
                    $(".showImgEdit").hide();
                }
            });
            layer.photos({
                photos: '.photo-list',
                shadeClose: false,
                closeBtn: 2,
                anim: 0
            });
        });

    </script>
@endsection

